<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addGoods</title>

    <base href="http://localhost/shop-resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
    <!--引入webupload CSS-->
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">

</head>
<body>
<div class="pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-goods-add">

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="华为nova8"
                       placeholder="" id="gname" name="gname" datatype="*" nullmsg="商品名不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="number" class="input-text" value="1999"
                       placeholder="" id="gprice" name="gprice" datatype="*" nullmsg="商品价格不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品父类型：</label>
            <div class="formControls col-5">
				<span class="select-box" style="width:150px;">
					<select id="gtypePid" class="select" name="gtypePid" size="1">
					</select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品子类型：</label>
            <div class="formControls col-5">
				<span class="select-box" style="width:150px;">
					<select id="gtypeCid" class="select" name="gtypeCid" size="1">
					</select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text"
                       placeholder="" name="gstock" value="100" datatype="n">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品描述：</label>
            <div class="formControls col-5">
                <textarea name="gdesc" id="gdesc" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>图片上传：</label>
            <input type="hidden" id="gpng" name="gpng">
            <!--dom结构部分-->
            <div id="uploader-demo" class="formControls col-5">
                <!--用来存放item-->
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择图片</div>
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<!--表单验证插件-->
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<!--引入webupload JS-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/AjaxUtil.js"></script>
<script type="text/javascript">

    //查询goodsType id->需要查询商品类型的id; pElemId->select标签id属性值,用于展示数据
    function initGoodsType(pid,pElemId){
        get("shop-back/goodsTypeController/getGoodsTypeListByPid/"+pid,function (data) {
            //获取select标签
            var pidElem = $("#"+pElemId);

            console.info("父标签数据: "+data[0].goodsTypeName);

            //追加元素前,清空
            // pidElem.childNodes().remove();
            var chilLen = pidElem.children().length;
            if (chilLen > 0) {
                pidElem.children().remove();
            }

            for (var i = 0; i < data.length; i++) {
                //创建option元素
                var optionElement = document.createElement("option");
                //给元素设置value与文本信息
                optionElement.value = data[i].id;
                optionElement.text = data[i].goodsTypeName;

                //将option标签加入select标签中
                pidElem.append(optionElement);
            }
        });
    }

    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        // 对表单中的数据进行校验
        $("#form-goods-add").Validform({
            tiptype: 2,
            callback: function (form) {
                //把表单对象序列化
                var formArray = form.serializeArray();
                // alert(formArray);
                //创建一个对象,存储表单数据
                var param = new Object();
                //3.循环遍历数组
                for (var i = 0; i < formArray.length; i++) {
                    var name = formArray[i].name; //获取表单元素的name属性,即实体类名
                    var val = formArray[i].value; //获取表单元素对应的值

                    // 复制
                    param[name] = val; //给param对象设置属性
                }
                // 控制台测试 输出param对象
                console.info(param);

                // 4.使用ajax发送param数据到后台
                $.post("http://localhost/shop-back/goodsController/addGoods",param,function(data){
                    // 1.判断这个请求是否处理成功了
                    if(data.status == "success"){
                        layer.msg('操作成功', {icon: 1,time:1000},function(){
                            //关闭层
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            // 重新加载父层元素
                            window.parent.location.reload();
                        });
                        // 提示用户操作成功，然后关闭添加用户的层
                    }else{
                        layer.msg(data.msg, {icon: 2,time:1000});
                    }

                },"JSON");

                return false;
            }
        });


        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,
            // 文件接收服务器
            server: 'http://localhost/shop-resources/file/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<span title="删除" class="selfmedia_addtemplate_imgDelSpan remove-this" id="span_' + file.id + '" div_id="' + file.id + '">X</span>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            $("#fileList").append( $li );

            /** 删除操作*/
            $li.on('click', '.remove-this', function () {
                uploader.removeFile(file, true);
                del_Picture(this, file.id);
            });

            /**
             * @todo删除图片操作
             * @param obj span × 按钮对象
             * @param file_id 整张图片的ID
             */
            function del_Picture(obj, file_id) {
                var photo_id = $(obj).attr('data');
                //移除整张图片样式
                $('#' + file_id).remove();
                //删除数组的该文件
                upload_img.splice($.inArray(photo_id, upload_img), 1);
            }

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, 100, 100 );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file,resp) {
            // $( '#'+file.id ).addClass('upload-state-done');
            var url = resp._raw;
            console.info(url);
            var gpng = $("#gpng").val();
            if (gpng) {
                // 隐藏域中已经包含了图片
                url = gpng + "|" + url;
            }
            // 图片是第一次上传
            $("#gpng").val(url);
        });

        // debugger

        // 初始化父类
        initGoodsType(-1, "gtypePid");

        // 用户选择了父类id后查询小类
        $("#gtypePid").change(function () {
            var pid = $(this).val();
            initGoodsType(pid, "gtypeCid");
        });


    });

</script>
</body>
</html>